<template>
  <div class="customer-container">
    <h3 class="page-title">新增客户</h3>

    <!-- 客户基本信息表单 -->
    <el-form :model="customerForm" label-width="380px" class="base-form">
      <div class="form-row">
        <el-form-item label="客户编号">
          <el-input v-model="customerForm.Customernumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="customerForm.CustomerName"></el-input>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="传真">
          <el-input v-model="customerForm.Fax"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="customerForm.Phone"></el-input>
        </el-form-item>
      </div>

      <div class="form-row">
        <el-form-item label="邮箱">
          <el-input v-model="customerForm.Email"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="customerForm.Remarks"></el-input>
        </el-form-item>
      </div>
    </el-form>

    <!-- 联系人表格 -->
    <el-table
      v-for="(list, index) in customerForm.contacts"
      :key="index"
      :data="AddConact"
      style="width: 1080px; margin-top: 20px"
    >
      <el-table-column prop="contactPerson" label="联系人" width="120">
        <el-form-item>
          <el-input
            v-model="list.contactPerson"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-table-column>

      <el-table-column prop="address" label="地址" width="150">
        <el-form-item>
          <el-input v-model="list.address" placeholder="请输入"></el-input>
        </el-form-item>
      </el-table-column>

      <el-table-column prop="contactPhone" label="电话" width="150">
        <el-form-item>
          <el-input v-model="list.contactPhone" placeholder="请输入"></el-input>
        </el-form-item>
      </el-table-column>
      <el-table-column prop="creationTime" label="创建时间" width="120">
        <el-form-item>
          <el-input v-model="list.creationTime" placeholder="请输入"></el-input>
        </el-form-item>
      </el-table-column>
      <el-table-column label="操作" width="220">
        <el-form-item>
          <el-button size="mini" type="danger" @click="removeContact(index)"
            >删除</el-button
          >
        </el-form-item>
      </el-table-column>
    </el-table>

    <!-- 操作按钮 -->
    <div class="button-group" style="text-align: right; margin-top: 20px">
      <el-button @click="addContact()">新增联系人</el-button>
      <el-button type="primary" @click="handleBatchAdd()">确定</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, ElTable, ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import dayjs from "dayjs";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();

// 客户表单数据
const customerForm = reactive({
  Customernumber: "",
  CustomerName: "",
  Fax: "",
  Phone: "",
  Email: "",
  Remarks: "",
  contacts: [createEmptyContact()], // 初始化一个空联系人,
});
const addContact = () => {
  customerForm.contacts.push(createEmptyContact());
};
// 创建空联系人模板
function createEmptyContact() {
  return {
    contactId: 0,
    contactPerson: "",
    address: "",
    contactPhone: "",
    creationTime: dayjs().format("YYYY-MM-DDTHH:mm:ss"), // 格式化日期时间
    isDelete: false,
  };
}

const removeContact = (index) => {
  ElMessageBox.confirm("是否确认删除?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  }).then(() => {
    customerForm.contacts.splice(index, 1);
  });
};
const handleBatchAdd = async () => {
  try {
    // 调用API
    const response = await KongaUrl.post(
      "/wangcong1/api/WHouase/AddContactsWithCustomer",
      customerForm
    );

    if (response.data.code === 200) {
      ElMessage.success("添加成功");
      // 重置表单
    } else {
      ElMessage.error(response.data.message);
    }
  } catch (error) {
    ElMessage.error("请求失败: ");
  }
};

const AddConact = ref([
  {
    contactId: 0,
    contactPerson: "",
    address: "",
    contactPhone: "",
    CreationTime: "2023-11-20T12:30:00Z ",
    isDelete: false,
    isEdit: false,
  },
]);

const generateTwelveDigitNumber = () => {
  const characters = "0123456789";
  let result = "";
  for (let i = 0; i < 6; i++) {
    result += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return result;
};

// 提交
onMounted(() => {
  customerForm.Customernumber = generateTwelveDigitNumber();
});
</script>

<style scoped>
.customer-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.page-title {
  margin-bottom: 20px;
  font-size: 18px;
  color: #606266;
}

.base-form {
  background: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-row {
  display: flex;
  margin-bottom: 15px;

  margin-bottom: 0;
}

.form-row > .el-form-item {
  flex: 1;
  margin-right: 20px;
  margin-right: 0;
}

.button-group {
  margin-top: 20px;
}
</style>